<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

  <style>
      /* 主要内容：缩略图*/
      .col-md-4 .card img {
          width: 100%; /* 使图片宽度自适应 */
      }

      /*搜索错误*/
      #search_fail {
          /*隐藏*/
          display: none;
      }

      /*搜索结果提示*/
      #search_result_info {
          /*隐藏*/
          display: none;
      }

  </style>

</head>

<body>

<!-- 静态顶部导航栏 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Start Travel 个人中心</a>
    </div>
    <!-- 搜索按钮 -->
    <div class="navbar-form navbar-left">
      <label for="search_value"></label>
      <input type="text" id="search_value" class="form-control" placeholder="搜索我的收藏...">
      <button class="btn btn-primary mt-2" onclick="searchCollectByLocation()">
        <span class="glyphicon glyphicon-search"> 搜索</span>
      </button>
      <span class="text-danger" id="search_fail">sorry,你搜索的地点暂时没有收藏</span>
    </div>

    <!-- 根据登录状态显示不同内容 -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <!-- 未登录状态 -->
        <li id="not-logged-in" style="display:none;">
          <a href="login.html">
            <span class="glyphicon glyphicon-log-in"> 登录</span>
          </a>
        </li>
        <li id="logged-in-logout" style="display:none;">
          <a id="logoutButton">
            <span class="glyphicon glyphicon-log-out"> 登出</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 收藏内容显示区域 -->
<div class="container mt-4">
  <h2>我的收藏</h2>
  <div id="favorites">
    <!-- 收藏内容将在这里动态显示 -->

  </div>
</div>

<!-- 搜索结果展示区域 -->
<div class="container mt-4">
  <div class="text-info" id="search_result_info">
    <h5>搜索结果</h5>
  </div>
  <div id="searchResults">
    <!-- 搜索结果将在这里动态显示 -->
  </div>
</div>

<!-- jQuery 脚本 -->
<!-- <script src="/dev/plugins/jquery/jquery.min.js"></script> -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

    <!-- 登出 -->
    var token = localStorage.getItem('token');

    $(document).ready(function () {

        // 从 localStorage 中取出 token
        if (token) {
            // 隐藏未登录状态控件
            document.getElementById('not-logged-in').style.display = 'none';
            // 显示登出按钮
            document.getElementById('logged-in-logout').style.display = 'block';
        } else {
            // 如果不存在 token，显示未登录状态控件
            document.getElementById('not-logged-in').style.display = 'block';
            // 隐藏登出按钮
            document.getElementById('logged-in-logout').style.display = 'none';
        }

        // 登出按钮点击事件
        document.getElementById('logoutButton').addEventListener('click', function () {
            // 清除 token
            localStorage.removeItem('token');
            // 跳转到首页
            window.location = 'index.html';
        });
    });

    // 动态显示收藏内容
    $.ajax({
        url: '/dev/user/getAllCollect',
        type: 'GET',
        data: {
            'token': token
        },
        // dataType: 'json', // 确保响应被解析为 JSON
        success: function (res) {
            if (Array.isArray(res.data.travels)) {
                // 如果 res 是数组，使用 forEach 遍历
                res.data.travels.forEach(function (item) {
                    // 处理每个项目
                    var card = $('<div class="col-md-4">' +
                        '<div class="card">' +
                        '<img src="../imgs/' + item.locationName + '.jpg" class="card-img-top thumbnail" alt="' + item.locationName + '">' +
                        '<div class="card-body">' +
                        '<h5 class="card-title">' + item.locationName + '</h5>' +
                        '<p class="card-text">' + item.info + '</p>' +
                        '<button type="button" class="btn btn-default" onclick="favorite(this)" data-destination-id="' + item.placeId + '">' +
                        '<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 收藏</button>' +
                        '</div></div></div>');
                    $('#favorites').append(card);
                });
            } else {
                // 如果 res 不是数组，处理单个对象或其它情况
            }
        },
        error: function (xhr, status, error) {
            alert('请求失败:', error);
        }
    });

    function favorite(button) {
        // 默认已收藏
        var isFavorite = true;
        // 获取当前点击的按钮对象
        var $btn = $(button);
        // 获取当前点击的收藏按钮所属的景点 id
        var placeId = $btn.data('destinationId');
        // 获取当前点击的收藏按钮的图标样式
        var $icon = $btn.find('span.glyphicon');
        // 操作后的样式
        var iconClass = isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star';

        // 利用 jQuery 的 Promise 对象和 $.when() 来处理多个异步请求
        var checkCollect = $.ajax({
            url: '/dev/collect/check',
            type: 'get',
            data: {
                'token': token,
                "placeId": placeId
            }
        });

        checkCollect.done(function (res) {
            // 处理第一个请求的结果
            if (res.code === '200') {
                // 已收藏
                // 图标改为空心
                iconClass = isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star';
                $icon.removeClass(isFavorite ? 'glyphicon-star' : 'glyphicon-star-empty')
                    .addClass(iconClass);
                console.log(isFavorite);// true
            } else {
                // 未收藏
                // 图标改为实心
                $icon.removeClass(iconClass)
                    .addClass(isFavorite ? 'glyphicon-star' : 'glyphicon-star-empty');
                // 因为默认是已收藏，所以检查数据库发现未收藏，更改收藏状态
                isFavorite = !isFavorite;
                console.log(isFavorite);
            }
        });

        checkCollect.fail(function (error) {
            // 处理错误
            alert('请求失败，请重试', error);
            // 如果请求失败，可以还原图标状态
            $icon.removeClass(iconClass)
                .addClass(isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star');
        });

        // 使用 $.when() 等待多个请求完成
        $.when(checkCollect).then(function () {
            console.log(isFavorite);// true
            // 发起第二个请求
            return $.ajax({
                // 根据当前状态选择添加或取消收藏的API
                url: '/dev/collect/' + (isFavorite ? 'remove' : 'add'),
                type: (isFavorite ? 'delete' : 'post'),
                data: {
                    'token': token,
                    "placeId": placeId
                }
            });
        }).then(function (res) {
            // 处理第二个请求的结果
            if (res.code === '200') {
                // 操作成功
                // 切换收藏状态
                isFavorite = !isFavorite;
                iconClass = isFavorite ? 'glyphicon-star' : 'glyphicon-star-empty';
                $icon.removeClass(isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star')
                    .addClass(iconClass);
                alert(res.msg);
            } else {
                alert('操作失败: ' + res.msg);
                // 如果请求失败，可以还原图标状态
                $icon.removeClass(iconClass)
                    .addClass(isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star');
            }
        }).fail(function (error) {
            // 处理错误
            alert('请求失败，请重试', error);
            // 如果请求失败，可以还原图标状态
            $icon.removeClass(iconClass)
                .addClass(isFavorite ? 'glyphicon-star-empty' : 'glyphicon-star');
        });
    }

    // 搜索收藏，支持模糊查询，结果可能多个
    function searchCollectByLocation() {
        // 获取搜索地点
        let location = document.getElementById("search_value").value;
        let search_fail = document.getElementById("search_fail");
        let search_result_info = document.getElementById("search_result_info");
        // 提示输入内容
        if (location.trim() === '') {
            // 隐藏搜索失败信息
            search_fail.style.display = 'none';
            // 清空搜索结果
            $("#searchResults").empty();
            search_result_info.style.display = 'none';
            alert('请输入地点名称');
            return;
        }
        $.ajax({
            url: '/dev/travel/searchCollectByLocation',
            async: true,
            data: {
                'token': token,
                location: location // 发送到后端的数据
            },
            type: 'GET',
            success: function (res) {
                if (res.code === '200') {
                    // 搜索到结果，隐藏
                    search_fail.style.display = 'none';
                    // 清空搜索结果
                    $("#searchResults").empty();
                    search_result_info.style.display = 'block';
                    if (res.data.size === 1) {
                        var imgName = res.data.locationName;
                        var img = $('<img>');
                        // 拼接图片路径
                        img.attr('src', '../imgs/' + imgName + '.jpg');
                        // 设置图片的 alt 属性
                        img.attr('alt', imgName);
                        // 设置图片样式
                        img.css('width', '200px');
                        img.css('margin', '10px');
                        // 将图片添加到容器中
                        // 局部刷新页面数据
                        $('#searchResults').html(
                            '地点名称: ' + res.data.locationName + '<br>' +
                            '主要介绍: ' + res.data.info + '<br>'
                        ).append(img);
                    } else {
                        // 如果 res 是数组，使用 forEach 遍历
                        res.data.forEach(function (item) {
                            var card = $(
                                '<div class="col-md-4">' +
                                '<div class="card">' +
                                '<img src="../imgs/' + item.locationName + '.jpg" class="card-img-top thumbnail" alt="' + item.locationName + '">' +
                                '<div class="card-body">' +
                                '<h5 class="card-title">' + item.locationName + '</h5>' +
                                '<p class="card-text">' + item.info + '</p>' +
                                '<button type="button" class="btn btn-default" onclick="favorite(this)" data-destination-id="' + item.placeId + '">' +
                                '<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> 收藏</button>' +
                                '</div>' +
                                '</div>' +
                                '</div>');
                            $('#searchResults').append(card);
                        });
                    }
                } else if (res.code === '500') {
                    // 没搜索结果，显示错误信息
                    search_fail.style.display = 'block';
                    // 清空搜索结果
                    $("#searchResults").empty();
                    search_result_info.style.display = 'none';
                }
            }, error: function (xhr) {
                // 请求失败
                // 隐藏搜索失败信息
                search_fail.style.display = 'none';
                // 清空搜索结果
                $("#searchResults").empty();
                search_result_info.style.display = 'none';
                alert("错误提示： " + xhr.status + " " + xhr.statusText);
            }
        })
    }

</script>
</body>
</html>